<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分片上传工具</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="app">
        <!-- 头部 -->
        <header class="header">
            <div class="container">
                <h1 class="logo">
                    <i class="fas fa-cloud-upload-alt"></i>
                    分片上传工具
                </h1>
                <div class="header-actions">
                    <button class="btn btn-secondary" onclick="app.clearCompleted()">
                        <i class="fas fa-trash"></i>
                        清除已完成
                    </button>
                    <button class="btn btn-secondary" onclick="app.toggleSettings()">
                        <i class="fas fa-cog"></i>
                        设置
                    </button>
                </div>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="main">
            <div class="container">
                <!-- 设置面板 -->
                <div class="settings-panel" id="settingsPanel">
                    <div class="settings-content">
                        <h3>上传设置</h3>
                        <div class="setting-group">
                            <label for="baseUrl">API地址:</label>
                            <input type="text" id="baseUrl" value="/api/notebook/environment">
                        </div>
                        <div class="setting-group">
                            <label for="chunkSize">分片大小:</label>
                            <select id="chunkSize">
                                <option value="1048576">1MB</option>
                                <option value="2097152" selected>2MB</option>
                                <option value="5242880">5MB</option>
                                <option value="10485760">10MB</option>
                            </select>
                        </div>
                        <div class="setting-group">
                            <label for="maxConcurrent">最大并发数:</label>
                            <select id="maxConcurrent">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3" selected>3</option>
                                <option value="5">5</option>
                            </select>
                        </div>
                        <div class="setting-group">
                            <label for="projectId">项目ID:</label>
                            <input type="text" id="projectId" value="default">
                        </div>
                        <div class="setting-group">
                            <label for="userId">用户ID:</label>
                            <input type="text" id="userId" value="user1">
                        </div>
                        <div class="setting-actions">
                            <button class="btn btn-primary" onclick="app.saveSettings()">保存设置</button>
                            <button class="btn btn-secondary" onclick="app.toggleSettings()">关闭</button>
                        </div>
                    </div>
                </div>

                <!-- 上传区域 -->
                <div class="upload-section">
                    <div class="upload-area" id="uploadArea">
                        <div class="upload-content">
                            <i class="fas fa-cloud-upload-alt upload-icon"></i>
                            <h3>拖拽文件到此处或点击选择</h3>
                            <p>支持多文件同时上传，最大单文件3GB</p>
                            <button class="btn btn-primary" onclick="document.getElementById('fileInput').click()">
                                <i class="fas fa-plus"></i>
                                选择文件
                            </button>
                        </div>
                        <input type="file" id="fileInput" multiple style="display: none;">
                    </div>
                </div>

                <!-- 统计信息 -->
                <div class="stats-section" id="statsSection">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-tasks"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number" id="totalTasks">0</div>
                            <div class="stat-label">总任务</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number" id="pendingTasks">0</div>
                            <div class="stat-label">等待中</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-upload"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number" id="uploadingTasks">0</div>
                            <div class="stat-label">上传中</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-check"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number" id="completedTasks">0</div>
                            <div class="stat-label">已完成</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-exclamation-triangle"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number" id="failedTasks">0</div>
                            <div class="stat-label">失败</div>
                        </div>
                    </div>
                </div>

                <!-- 任务列表 -->
                <div class="tasks-section">
                    <div class="section-header">
                        <h3>上传任务</h3>
                        <div class="section-actions">
                            <button class="btn btn-sm btn-secondary" onclick="app.pauseAll()">
                                <i class="fas fa-pause"></i>
                                暂停全部
                            </button>
                            <button class="btn btn-sm btn-secondary" onclick="app.resumeAll()">
                                <i class="fas fa-play"></i>
                                恢复全部
                            </button>
                        </div>
                    </div>
                    <div class="tasks-list" id="tasksList">
                        <div class="empty-state">
                            <i class="fas fa-inbox"></i>
                            <p>暂无上传任务</p>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- 通知容器 -->
        <div class="notifications" id="notifications"></div>
    </div>

    <!-- 脚本文件 -->
    <script src="chunk-uploader.js"></script>
    <script src="upload-manager.js"></script>
    <script src="app.js"></script>
</body>
</html>

